<template>
  <p>count: {{ counterStore.count }}, 它是 {{ counterStore.oddOrEven }}</p>
  <button @click="increment">+</button>
  <button @click="decrement">-</button>
  <button @click="update">更新</button>
</template>

<script lang="ts" setup>
import { useCounterStore } from "./store/modules/counter";

const counterStore = useCounterStore();

const increment = () => {
  // 触发action函数(往往会发送请求)
  counterStore.increment(1, 2, 3, 4, 5);
};

const decrement = () => {
  // pinia中state数据是可读可写，可以直接修改
  counterStore.count--;
};

/*
  更新数据：要不要发送请求
    如果需要发送请求，就定义action去更新
    如果不需要发送请求：
      更新一个数据：直接更新数据
      更新多个数据：$patch 
*/

const update = () => {
  // counterStore.todoList.push({ id: 1, name: "xxx", isDone: false });
  counterStore.$patch({
    count: counterStore.count - 1,
    // count: --counterStore.count, // 更新数据两次
    todoList: [],
  });
};
</script>
